<template>
	<view class="warp">
		<!-- 内容区域 -->
		<view class="content">
			<!-- 记录详情 -->
			<uni-card :title="item.createName" :extra="item.createTime" is-shadow>
				<uni-collapse>
					<!-- 方位信息 -->
					<view class="detail-item">
						<view class="detail-label">方位:</view>
						<dict-tag :options="lineOptions" :value="item.line" />
					</view>

					<!-- 出料口信息，使用折叠面板 -->
					<uni-collapse-item title="出料口信息">
						<view class="tags-container">
							<dict-tag :options="portOptions" :value="item.port" />
						</view>
					</uni-collapse-item>
				</uni-collapse>

				<!-- 各项检测数据 -->
				<view class="data-section">
					<view class="detail-item" v-for="(field, index) in detailFields" :key="index">
						<view class="detail-label">{{ field.label }}:</view>
						<view class="detail-value" :class="{'error-value': field.isError}">
							{{ field.value }}
						</view>
					</view>
				</view>
			</uni-card>

			<!-- 异常警告 -->
			<view v-if="isError(item)" class="warning">
				<text class="warning-text">存在异常数据！</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer">
			<u-button type="primary" @click="onEdit">编辑</u-button>
			<!-- <u-button @click="onDelete">删除</u-button> -->
		</view>
	</view>
</template>

<script>
	import {
		add,
		edit,
		getDetail,
		del
	} from '@/api/work/produce/feedTemp/index.js';

	export default {
		data() {
			return {
				item: {}, // 当前显示的记录
				lineOptions: [], // 方位选择数据
				portOptions: [], // 出料口选择数据
				portTags: [], // 用于显示方位和出料口标签的数组
				detailFields: [], // 检测数据的字段数组
			};
		},
		onLoad(options) {
			this.getDetail(options.recordId); // 获取详情
			this.getDictList(); // 获取字典数据
		},

		methods: {
			// 获取字典数据（方位、出料口等）
			getDictList() {
				uni.getStorage({
					key: 'discharge_line',
					success: (resp) => {
						this.lineOptions = resp.data
					}
				})
				uni.getStorage({
					key: 'discharge_outlet',
					success: (resp) => {
						this.portOptions = resp.data
					}
				})
			},

			// 初始化方位和出料口的标签数据
			initTags() {
				// 初始化出料口标签
				this.portTags = this.portOptions.map(opt => ({
					label: `${opt.dictLabel}`,
					value: opt.dictValue
				}));
			},

			// 初始化检测数据字段
			initDetailFields() {
				this.detailFields = [{
						label: "跺位",
						value: `${this.item.storageBay || ''}`
					},
					{
						label: "水分",
						value: `${this.item.moiture || ''}`,
						isError: this.item.moiture > 12
					},
					{
						label: "呕吐",
						value: `${this.item.deoxynivalenol || ''}`,
						isError: this.item.deoxynivalenol > 5000
					},
					{
						label: "赤霉",
						value: `${this.item.fusariumToxin || ''}`,
						isError: this.item.fusariumToxin > 1500
					},
					{
						label: "黄曲",
						value: `${this.item.aflatoxin || ''}`,
						isError: this.item.aflatoxin > 50
					},
					{
						label: "色号",
						value: `${this.item.colorCode || ''}`,
						isError: this.item.colorCode > 3.5
					},
					{
						label: "备注",
						value: `${this.item.remark || ''}`
					},
				];
			},

			// 判断字段是否异常
			isErrorField(field) {
				return field.value === "异常";
			},

			// 获取详情数据
			getDetail(recordId) {
				if (recordId) {
					getDetail(recordId).then(res => {
						this.item = res.data;
						this.initDetailFields();
					});
				}
			},

			// 判断整体数据是否有异常
			isError(data) {
				return this.detailFields.some(field => field.isError);
			},

			// 编辑
			onEdit() {
				uni.redirectTo({
					url: `/pages/work/produce/feedTemp/feedTemp?recordId=${this.item.recordId}`,
				});
			},

			// 删除
			onDelete() {
				uni.showModal({
					title: '删除记录',
					content: '确定要删除此记录吗？',
					success: (res) => {
						if (res.confirm) {
							del(this.item.recordId).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success',
									});
									this.back(); // 删除后返回上一页
								}
							});
						}
					},
				});
			},
		},
	};
</script>

<style lang="scss">
	.warp {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background-color: #f5f5f5;
	}

	.tags-section,
	.data-section {
		margin-bottom: 20px;
	}

	.tags-title {
		font-weight: bold;
		margin-bottom: 10px;
		color: #333;
	}

	.tags-list {
		display: flex;
		flex-wrap: wrap;
	}

	.tag-item {
		background-color: #e6f7ff;
		color: #333;
		padding: 6px 10px;
		margin: 5px;
		border-radius: 5px;
		font-size: 14px;
	}

	.error-tag {
		background-color: #ffe6e6;
		color: #FF3B30;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		border-bottom: 1px solid #ddd;
	}

	.detail-label {
		font-weight: bold;
		color: #333;
	}

	.detail-value {
		color: #666;
	}

	.error-value {
		color: #FF3B30;
		font-weight: bold;
	}

	.warning {
		margin-top: 20px;
		padding: 10px;
		background-color: #f8d7da;
		border: 1px solid #f5c6cb;
		border-radius: 5px;
		text-align: center;
	}

	.warning-text {
		color: #721c24;
		font-weight: bold;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 50%;
		width: 100vw;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-between;
		padding: 10px;
		background-color: #fff;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
		border-radius: 20px;
	}

	.footer u-button {
		width: 48%;
	}

	.right-align {
		text-align: right;
	}
</style>